<template>
  <div id="product-group-page" :style="{
    minHeight:(getWinSize().height-this.getSafeArea().top)+'px',
  }">
    <div class="page-title" style="background: none; color: #FFFFFF"
         :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>优惠团购</span>
    </div>

    <div class="top-page-banner"  :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <img ref="top-page-banner-img" :style="{height:imageHeight+'px'}"
           :src="'/static/page-bg/product-group-page-bg.png'" alt="">
    </div>


    <i-scroller-box id="group-list" ref="i-scroller-box" url="Public/GroupProductList"
                    :height="getWinSize().height-(imageHeight)-this.getSafeArea().top"
                    :style="{
      width:'100%',
      height: (getWinSize().height-imageHeight-this.getSafeArea().top)+'px',
      top:(imageHeight+this.getSafeArea().top)+'px'
         }">
      <template v-slot:list-item="{index,data}">
        <div class="item" :key="index">
          <div class="left">
            <img :src="data.image?data.image:data.shopProductImage" @click="toDetail(data)">
          </div>
          <div class="right">
            <div class="title ovd_s" style="height: 25px; line-height: 25px; max-width: 95%;" v-text="data.shopProductName" @click="toDetail(data)"></div>
            <div class="model">
              型号: <span class="ovd_s" style="display: inline-block; position: relative; top: 3px;" v-text="data.model" :style="{
            maxWidth:Math.ceil((winWidth-105)*0.65)+'px'
          }"></span>
            </div>
            <div class="price-box" style="position: relative; top: 2px">
              <div class="group-price">
                团购价格: <span v-text="'￥'+ToMoney(data.groupPrice)"></span>
              </div>
              <div class="price">
                原价格: <span v-text="'￥'+ToMoney(data.price)"></span>
              </div>
            </div>
            <div class="button-box">
              <div class="group-buy-button">
                <el-button type="danger" @click="goToGroupBuy(data)">拼团购买</el-button>
              </div>
              <div class="buy-button">
                <el-button type="primary" @click="goToBuy(data)">单独购买</el-button>
              </div>
            </div>
          </div>
          <div class="c"></div>
        </div>
      </template>
    </i-scroller-box>


  </div>
</template>

<script>
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'ProductGroup',
  components: {IScrollerBox},
  data: function () {
    return {
      imageHeight: (this.getWinSize().width * 0.5),
      winWidth:this.getWinSize().width,
      form: {
        page: 1,
        pageSize: 20,
      }
    }
  },
  mounted () {
    if (this.CurrUser.IsLogin()){}
    this.getList()
  },
  methods: {
    getList: function () {
      this.$refs['i-scroller-box'].getList({})
    },
    // 团购跳转
    goToGroupBuy: function (item) {
      // this.setCacheParams('group')
      let $this=this
      $this.checkLoginAct(function () {
        $this.bus.$emit('GroupOrderJoinDialogCallBus', {
          shopId: item.shopId,
          shopLogo: item.shopLogo,
          shopName: item.shopName,
          id: item.id,
          shopProductId: item.shopProductId,
          shopProductName: item.shopProductName,
          image: item.image?item.image:item.shopProductImage,
          model: item.model,
          price: item.price,
          groupPrice: item.groupPrice,
          groupNums: item.groupNums,
        })
      })
    },

    // 商品详情
    toDetail: function (item) {
      this.$router.push({
        name: 'ProductDetail',
        query: {
          id: item.shopProductId,
          model: item.model
        }
      })
    },

    // 单独购买
    goToBuy: function (item) {
      let $this=this
      $this.checkLoginAct(function () {
        var selectData = {
          shop: {
            id: item.shopId,
            name: item.shopName,
            logo: item.shopLogo
          },
          productList: [
            {
              nums: 1,
              model: item.model,
              price: item.price,
              shopProductName: item.shopProductName,
              image: item.image?item.image:item.shopProductImage,
              id: item.id,
              shopProductId: item.shopProductId
            }
          ]
        }
        localStorage.setItem('selectProductData', JSON.stringify(selectData))
        $this.$router.push({
          name: 'ConfirmOrder',
          query: {
            type: 'one'
          },
        })
      })
    },
  }
}
</script>

<style scoped>

</style>
